<template>
<el-container>
  <el-header>
    <!--表格上部标签-->
    <div class="tableHeader">
      <span>用户管理</span>
    </div>
    <div class="tableSearch">
      <el-input placeholder="请输入内容" class="input-with-select" span="12" clearable>
        <el-select slot="prepend" placeholder="请选择" value="">
          <el-option label="订单编号" value="订单编号"></el-option>
          <el-option label="处理方式" value="处理方式"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
  </el-header><!--表格头部-->
  <el-main>
    <el-table
      ref="multipleTable"
      :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="编号">
        <template slot-scope="scope">{{ scope.row.user_id }}</template>
      </el-table-column>
      <el-table-column align="center" label="用户账号">
        <template slot-scope="scope">{{ scope.row.user_account_name }}</template>
      </el-table-column>
      <el-table-column align="center" label="用户昵称">
        <template slot-scope="scope">{{ scope.row.user_nickname}}</template>
      </el-table-column>
      <el-table-column align="center" label="性别">
        <template slot-scope="scope">{{ scope.row.user_sex}}</template>
      </el-table-column>
      <el-table-column align="center" label="默认地址">
        <template slot-scope="scope">{{ scope.row.addr}}</template>
      </el-table-column>
      <el-table-column align="center" label="手机号码">
        <template slot-scope="scope">{{ scope.row.user_tel_num }}</template>
      </el-table-column>
      <el-table-column align="center" label="生日">
        <template slot-scope="scope">{{ scope.row.birthtime }}</template>
      </el-table-column>
      <el-table-column align="center" label="注册时间">
        <template slot-scope="scope">{{ scope.row.regtime }}</template>
      </el-table-column>
      <el-table-column align="center" label="状态">
        <template slot-scope="scope">
          <el-tag :type="toggleButtonChange(scope.row.user_state).StateColor">
          {{ scope.row.user_state }}
        </el-tag>
        </template>
      </el-table-column>
      <el-table-column  align="center" fixed="right" label="操作" width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="success" @click="handleCheck(scope.$index, scope.row)">查看</el-button>
<!--          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
          <el-button size="mini" :type="toggleButtonChange(scope.row.user_state).color" @click="handleStar(scope.$index, scope.row)"
                     v-if="$store.state.userInfo.employeeLv!=='门店管理员'">{{toggleButtonChange(scope.row.user_state).string}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-main><!--表格内容-->
  <el-footer>
    <div class="tablePage">
      <el-button size="mini" type="danger" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">全部停用</el-button>
      <el-button size="mini" type="success" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">全部启用</el-button>
      <!--<el-button size="mini" type="info" disabled>导出 Excel</el-button>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page='currentPage'
        :page-sizes="[10, 20, 50, 100]"
        :page-size='pageSize'
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length">
      </el-pagination>
    </div>
  </el-footer><!--表格尾部-->
  <!--查看弹框开始-->
  <el-dialog title="用户详情" :visible.sync="dialogFormVisible">
    <el-form :model="form">
      <el-form-item label="用户账号：" :label-width="formLabelWidth">
        <span>{{gridData.user_account_name}}</span>
      </el-form-item>
      <el-form-item label="用户昵称：" :label-width="formLabelWidth" >
        <span>{{gridData.user_nickname}}</span>
      </el-form-item>
      <el-form-item label="性别：" :label-width="formLabelWidth" >
        <span>{{gridData.user_sex}}</span>
      </el-form-item>
      <el-form-item label="生日：" :label-width="formLabelWidth" >
        <span>{{gridData.birthtime}}</span>
      </el-form-item>
      <el-form-item label="默认地址：" :label-width="formLabelWidth" >
        <span>{{gridData.addr}}</span>
      </el-form-item>
      <el-form-item label="手机号码：" :label-width="formLabelWidth" >
        <span>{{gridData.user_tel_num}}</span>
      </el-form-item>
      <el-form-item label="注册时间：" :label-width="formLabelWidth" >
        <span>{{gridData.regtime}}</span>
      </el-form-item>
      <el-form-item label="状态：" :label-width="formLabelWidth" >
        <span>{{gridData.user_state}}</span>
      </el-form-item>
    </el-form>
  </el-dialog>
  <!--查看弹框结束-->
</el-container>
</template>

<script>
  import searchbox from '../ZF/searchbox'
  import buttons from '../zys/buttons'
    export default {
        name: "usercontrol",
      components: {
        searchbox,
          buttons
      },
      data() {
        return {
          currentPage: 1,
          currentSpuPage: 1,
          pageSize: 10,
          multipleSelection: [],// 多行选中
          // table数据传入
          list: [],
          gridData: [],//弹框数据
          dialogFormVisible: false,
          userState:{
            id:'',
            state:''
          },
          form: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          formLabelWidth: '120px'
        }
      },
      methods: {
        // 选中行
        handleSelectionChange(val) {
          console.log('val:', val)
        },
        //查看
        handleCheck(index,row){
          this.dialogFormVisible=true;
          this.gridData=row;
          // console.log(' index:', index);
          // console.log(' row:', row);
        },
        // 编辑
        // handleEdit(index, row) {
        //   this.dialogFormVisible=true;
        //   this.gridData=row;
        //   // console.log(' index:', index);
        //   // console.log(' row:', row);
        // },
        // 停用or启用
        handleStar(index, row) {
          this.userState.id=row.user_id;
          this.userState.state=row.user_state;
          // console.log(this.userState);
          this.$axiosx.get('/api/backUserState',{params:this.userState})
            .then(response=>{
            });
          this.userUpdate();
          // console.log(row.user_state);
          // console.log(' index:', index);
          // console.log(' row:', row);
        },
        // 分页控制开始
        handleSizeChange (val) {
          this.pageSize = val
        },
        handleCurrentChange (val) {
          this.currentPage = val
        },
        handleSpuCurrentChange (val) {
          this.currentSpuPage = val
        },
        // 分页控制结束
        toggleButtonChange (param) {
          if (param === '启用') {
            return {
              string: '停用',
              color: 'danger',
              StateColor: 'success'
            }
          } else {
            return {
              string: '启用',
              color: 'success',
              StateColor: 'danger'
            }
          }
        },
        userUpdate(){
          this.$axiosx.get('/api/backUserManage')
            .then((response)=>{
              this.list = response.data;
              // console.log(this.list);
              for (let i=0;i<this.list.length;i++){
                // console.log(this.list[i].addr_province+this.list[i].addr_detail);
                this.list[i].addr=
                  this.list[i].addr_province+
                  this.list[i].addr_city+
                  this.list[i].addr_district+
                  this.list[i].addr_detail;/*拼接地址*/
              }
            });
        }
      },
      created(){
          this.userUpdate();
      }
  }
</script>

<style scoped>
  .tableHeader {
    width: 100%;
    color: white;
    background-color: #00838f;
    height: 40px;
    /*margin-bottom: 5px;*/
    font-weight: 700;
    font-size: 14px;
  }

  .tableHeader span {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
  }

  .tableHeader button {
    color: white;
    float: right;
    margin-right: 20px;
  }

  .tableSearch {
    /*width: 100%;*/
    height: 40px;
    background-color: #fff;
    margin-bottom: 1px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .el-pagination{
    float: right;
  }
  .userState{
    border:1px solid red;
  }
  .input-with-select.el-input.el-input-group.el-input-group--append.el-input-group--prepend {
    width: 500px;
    margin-top: 5px;
  }
  .refundHeader{
    margin-bottom: 20px;
  }
  .el-select{
    width: 110px;
  }
</style>
